<template>
  <div>
    <!-- 模糊查询 -->
    <div>
      <el-form :inline="true" :model="studentForm" :rules="rules" ref="studentForm" class="demo-form-inline">
      <el-form-item label="学生ID" prop="studentId">
        <el-input v-model="studentForm.studentId" placeholder="学生ID"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('studentForm')">查询</el-button>
      </el-form-item>
    </el-form>
    </div>

    <el-table
    ref="multipleTable"
     :data="tableData.list"
     style="width: 100%"
     tooltip-effect="dark"
     stript
      @selection-change="handleSelectionChange">
      <el-table-column
      type="selection"
      prop="transactionId"
      width="55">
    </el-table-column>
     <el-table-column
       prop="student.studentIdcard"
       label="身份证"
       >
     </el-table-column>
     <el-table-column
       prop="student.studentName"
       label="姓名"
       width="120">
     </el-table-column>
     <el-table-column
       prop="student.studentAddress"
       label="地址"
       >
       show-overflow-tooltip>
     </el-table-column>

     <el-table-column
       prop="studentId"
       label="查看详情"
       >
       <template slot-scope="scope">

         <el-dialog title="异动详情" :visible.sync="dialogFormVisible">
           <div style="margin: 10px;"></div>
              <el-form :label-position="labelPosition" label-width="80px" :model="gridData">
               <el-form-item label="申请主题:">
                 <el-input v-model="gridData.transactionReasonRequest" :disabled="true"></el-input>
               </el-form-item>
               <el-form-item label="申请时间:">
                 <el-input v-model="gridData.transactionApplyDate"  :disabled="true"></el-input>
               </el-form-item>
               <el-form-item label="开始时间:">
                 <el-input v-model="gridData.transactionStartDate" :disabled="true"></el-input>
               </el-form-item>
               <el-form-item label="申请时长:">
                 <el-input v-model="gridData.transactionHowLong" :disabled="true"> </el-input>
               </el-form-item>
               <el-form-item label="申请详细:">
                <el-input type="textarea" v-model="gridData.transactionReasonText" :disabled="true"></el-input>
               </el-form-item>
               <el-form-item label="现状:">
                 <el-input v-model="gridData.transactionCurrentState" :disabled="true"></el-input>
               </el-form-item>

              </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="dialogFormVisible = false" >确 定</el-button>
            </div>
          </el-dialog>

         <el-button type="primary" icon="el-icon-info" size="small" @click="dialogFormVisible = true" @click.native="showDetail(scope.row)" ></el-button>

       </template>

     </el-table-column>

     <el-table-column
       prop="transactionResponseState"
       label="审核状态"
       >
     </el-table-column>

     <el-table-column
      label="操作"
      >
      <template slot-scope="scope">
        <el-popover
          ref="popover2"
          placement="bottom"

          trigger="click">
          <div style="margin: 10;">
          <el-radio-group v-model="scope.row.transactionResponseState" size="small" @change="handleClick(scope.row.transactionId,scope.row.transactionResponseState)">
            <el-radio-button label="审核通过" size="small"></el-radio-button>
            <el-radio-button label="审核未通过" size="small"></el-radio-button>
          </el-radio-group>
        </div>
        </el-popover>
        <el-button type="text" v-popover:popover2>审 核</el-button>
      </template>
    </el-table-column>
   </el-table>
   <!-- 分页 -->
   <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage3"
        :page-size="tableData.pageSize"
        layout="total, prev, pager, next, jumper"
        :total="tableData.total">
    </el-pagination>
  </div>
</template>
<style>
.el-table th{
  text-align: center;
}
</style>

<script>
import {queryStudentFy} from '@/axios/api'
import {queryStudentMessage} from '@/axios/api'
import {QueryStudentUp} from '@/axios/api'
import {formatDate} from '@/common/js/date'
  export default {
    data() {
      return {
        tableData: {},
        currentPage3: 1,
         multipleSelection: [],
         gridData: {},
        dialogTableVisible: false,
        dialogFormVisible: false,
        labelPosition: 'right',

        pageIndex: 1,

        visible2: false,
        studentForm: {
          studentId: '',

        },

        rules: {
         studentId: [
           // { required: true, message: '请输入查询名称', trigger: 'blur' },
            { pattern: /^[0-9]+$/, message: '请输入正整数', trigger: 'blur'}
           // { min: 3, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
         ],
         select: [
           { required: true, message: '请选择查询区域', trigger: 'change' }
         ]
      }
      }
    },
    methods: {
      //时间格式化
   //    dateFormat:function(row, column) {
   //      var date = row[column.property];
   //   if (date == undefined) {
   //     return "";
   //   }
   //   return moment(date).format("YYYY-MM-DD HH:mm:ss");
   // },
          /**
           * 全选
           */
      toggleSelection(rows) {
              if (rows) {
                rows.forEach(row => {
                  this.$refs.multipleTable.toggleRowSelection(row);
                });
              } else {
                this.$refs.multipleTable.clearSelection();
              }
            },
            handleSelectionChange(val) {
              this.multipleSelection = val;
            },
            /**
             * 模糊查询
             */
            submitForm(formName) {
              this.$refs[formName].validate((valid) => {
                if (valid) {
                  let params = {pageIndex:this.pageIndex,studentId:this.studentForm.studentId}
                  console.log(this.studentForm.studentId);
                  console.log("学生ID查询:"+ params);
                  queryStudentFy(params).then(res =>{
                    this.tableData = res.resData;
                    console.log(res);
                  });
                } else {
                  console.log('error submit!!');
                  return false;
                }
              });
            },
            /**
             * 查看详情
             */
            showDetail(val) {
                console.log("查看详情:"+val);
                console.log(val.transactionApplyDate);
                val.transactionApplyDate=formatDate(new Date(val.transactionApplyDate),"yyyy-MM-dd hh:mm:ss");
                val.transactionStartDate=formatDate(new Date(val.transactionStartDate),"yyyy-MM-dd hh:mm:ss");
              //  moment(val.transactionApplyDate).format("YYYY-MM-DD HH:mm:ss");
                this.gridData = val
                //时间格式化

              //alert(val);
              // let params = {transactionId:val};
              // console.log("查看详情:"+params);
              // queryStudentMessage(params).then(res =>{
              //     console.log(res.resData);
              //     this.gridData = res.resData.transaction
              // })
            },
            /**
             * 修改审核
             */
            handleClick(id,val) {
              //alert(id);
              //alert(val);
              let params = {transactionId:id,transactionResponseState:val};
              console.log("修改审核:"+params);
              QueryStudentUp(params).then(res =>{
                console.log(res);
                if (res.status == 200) {
                  this.$message({
                    message: res.message,
                    type: 'success'
                  });
                }

              })
            },
            /**
             * 分页
             */
            handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        let params = {pageIndex:val,studentId:this.studentForm.studentId};
        queryStudentFy(params).then(res =>{
          console.log(res);
        this.tableData =  res.resData
        })
      },

  },
  mounted(){
    this.handleCurrentChange(this.pageIndex)
  }
}

</script>
